<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>笨鸟支付宝收银台</title>
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
    <!-- 主文件 -->
    <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/antui.css"/>
    <!-- 组件 -->
    <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/??dpl/widget/message.css,dpl/icon/message.css,dpl/widget/search.css"/>
    <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/widget/notice.css">
    <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/widget/tips.css">
    <link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/dpl/widget/dialog.css">
    <!-- js -->
    <script src="https://gw.alipayobjects.com/as/g/antui/antui/10.1.32/antui.js"></script>
</head>
<style>
    .am-notice .am-notice-content {
        -webkit-flex: 1;
        overflow: hidden;
        margin-left: 15px;
        margin-right: 5px;
        padding-left: 25px;
    }
</style>

<body>
<!--<div>${channel}}</div>-->
<div class="am-notice" role="alert" id="alert">
    <div class="am-notice-content">由于客户端版本问题，部分设备可能无法跳转支付</div>
    <div class="am-notice-operation">
        <a onclick="closeAlert()" class="am-notice-close" role="button"></a>
    </div>
</div>
<div class="am-message result">
    <i id="icon-wait" class="am-icon result wait"></i>
    <i id="icon-fail" style="display: none" class="am-icon result warn"></i>
    <div id="waiting" class="am-message-main">等待跳转支付...</div>
    <div class="am-message-sub">若无法自动跳转支付请点击下方立即支付按钮</div>
</div>
<div class="am-button-wrap">
    <!--<button class="am-button blue" onclick="showDialog()">扫码支付</button>-->
    <button class="am-button blue" onclick="showAction()">立即支付</button>
    <button class="am-button white" onclick="returnApp()">取消支付</button>
</div>
<div class="am-tips am-tips-block am-tips-favorite" id="tip">
    <div class="am-tips-wrap">
        <div class="am-tips-close" onclick="closeTip()">关闭</div>
        <div class="am-tips-icon">
            <img th:src="@{/img/zfb.png}">
        </div>
        <div class="am-tips-content am-ft-ellipsis">
            若无法跳转请点击“立即支付”
        </div>
        <div class="am-tips-action" role="button" onclick="closeTip()">
            知道了
        </div>
    </div>
</div>

<div class="am-dialog-mask show" id="dialog-mask" style="display: none"></div>
<div class="am-dialog image show" role="dialog" id="dialog" style="display: none">
    <div class="am-dialog-wrap">
        <div class="am-dialog-img fill">
            <img th:src="@{/img/alireamrk.png}"  width="85%" height="150">
        </div>
        <div class="am-dialog-header">
            <h3 id="title">订单标识号：<span id="num1"></span></h3>
        </div>
        <div class="am-dialog-body">
            <p class="am-dialog-brief" id="content">支付时请输入金额：<span id="money"></span>，备注中输入标识号：<span id="num2"></span></p>
        </div>
        <div class="am-dialog-footer">
            <a id="btn2" type="button" class="am-dialog-button" style="display: block;" onclick="customPay()">知道了，立即支付</a>
        </div>
        <a class="am-dialog-close" onclick="closeDialog()"></a>
    </div>
</div>

<div class="am-dialog-mask show" id="dialog-mask2" style="display: none"></div>
<!-- A11Y: 对话框隐藏时设置 aria-hidden="true"，显示时设置 aria-hidden="false" -->
<div class="am-dialog show" role="dialog" id="dialog2" style="display: none">
    <div class="am-dialog-wrap">
        <div class="am-dialog-header">
            <h3>请务必选择"普通红包"支付</h3>
        </div>
        <div class="am-dialog-body">
            <p class="am-dialog-brief">请勿修改红包内金额或备注，若系统超过24小时未领取，金额将自动退回您的账户;如果退出支付,请再次扫码使用[备用支付]</p>
        </div>
        <div class="am-dialog-footer">
            <button type="button" class="am-dialog-button" onclick="redPay()">知道了，立即支付</button>
        </div>
    </div>
</div>
</body>
<script>

    // 判断是否支付宝内打开
    var ua = window.navigator.userAgent.toLowerCase();
    // if (ua.indexOf("alipay")<0) {
    //     // var money = [[${channelOrder.amount}]];
    //     // var num = '[[${channelOrder.orderId}]]';
    //     location.href = "http://192.168.43.11:443";
    // }

    var money = [[${channelOrder.amount}]];
    var num = '[[${channelOrder.ptOrderno}]]';

    // 替换你的支付宝userId
    var userId ='[[${channelOrder.cardId}]]'; // "2088432737017604";

    // 如需红包模式请配置如下信息
    var account = '[[${channelOrder.account}]]'; // 支付宝账号（打开支付宝app点击我的上方-个人主页即可看到支付宝账户）
    var nickName = '[[${channelOrder.accountName}]]' // "betty"; // 支付宝昵称（打开支付宝app点击我的上方-个人主页头像下方即你的昵称）

    // 如需银行卡转账模式请填写如下信息（正规个人收款没必要使用）
    var redUrl = "alipays://platformapi/startapp?appId=88886666&appLaunchMode=3&canSearch=false&chatLoginId="+account
        +"&chatUserId="+userId+"&chatUserName="+nickName+"&chatUserType=1&entryMode=personalStage&prevBiz=chat&schemaMode=portalInside&target=personal" +
        "&money="+money+"&amount="+money+"&remark="+num;

    var friendUrl = "alipays://platformapi/startapp?appId=20000186&actionType=addfriend&userId=" + userId + "&loginId=" + account + "&source=by_f_v&alert=true";

    function customPay() {
        location.href = customUrl;
    }

    function redPay() {
        document.getElementById("dialog-mask2").style.display = "none";
        document.getElementById("dialog2").style.display = "none";

        // 加好友
        location.href = friendUrl;
        // 延时启动红包
        setTimeout(function() {
            location.href = redUrl;
        }, 888);

    }

    document.getElementById("money").innerText = money;
    document.getElementById("num1").innerText = num;
    document.getElementById("num2").innerText = num;

    function returnApp() {
        AlipayJSBridge.call("exitApp")
    }

    function closeAlert() {
        document.getElementById("alert").style.display = "none";
    }

    function closeTip() {
        document.getElementById("tip").style.display = "none";
    }

    function closeDialog() {
        document.getElementById("dialog-mask").style.display = "none";
        document.getElementById("dialog").style.display = "none";
    }

    function showDialog() {
        document.getElementById("dialog-mask").style.display = "block";
        document.getElementById("dialog").style.display = "block";
    }

    function showDialog2() {
        document.getElementById("dialog-mask2").style.display = "block";
        document.getElementById("dialog2").style.display = "block";
    }

    function ready(a) {
        window.AlipayJSBridge ? a && a() : document.addEventListener("AlipayJSBridgeReady", a, !1)
    }

    function showAction() {
        AlipayJSBridge.call('actionSheet',{
            'title': '选择支付方式',
            'btns': ['推荐支付', '备用支付'],
            'cancelBtn': '取消',
        }, function(data) {
            switch (data.index) { // index标示用户点击的按钮，在actionSheet中的位置，从0开始
                case 0:
                    showDialog2();
                    break;
                case 1:
                    // 直接红包
                    location.href = redUrl;
                    break;
            }
        });
    }

    ready(function() {
        AlipayJSBridge.call('setTitle', {
            title: '笨鸟支付宝收银台'
        });

        // AlipayJSBridge.call('pushWindow', {
        //        url:friendUrl
        //    });
        // setTimeout(function() {
        //     location.href = redUrl;
        // }, 888);
        // var a = {
        //     actionType: "scan",
        //     u: userId,
        //     a: money,
        //     m: num,
        //     biz_data: {
        //         s: "money",
        //         u: userId,
        //         a: money,
        //         m: num,
        //     }
        // }
//            AlipayJSBridge.call('pushWindow', {
//                url: 'alipays://platformapi/startapp?appId=20000123&actionType=scan&biz_data=' +
//                '{"s": "money","u": "'+userId+'","a": "'+money+'","m": "='+num+'="}'
//            },function (a) {
//                if(a.errorCode==4){
//                    alert("跳转支付失败，请保存二维码扫码支付")
//                }
//            });
//         AlipayJSBridge.call("startApp", {
//             appId: "20000123",
//             param: a
//         }, function (a) {
//             if (a.errorCode == 4) {
//                 document.getElementById("icon-wait").style.display = "none";
//                 document.getElementById("icon-fail").style.display = "block";
//                 document.getElementById("waiting").innerText = "自动跳转支付失败";
//                 alert("跳转支付失败，请点击立即支付")
//             }
//         });
    });

    //        document.addEventListener("resume", function(a) {
    //            returnApp()
    //        });
</script>
</html>
